<template>
	<div class="wrap">
		<Table  :columns="columnList" :data="tableData" 
      size="small"
      border
      stripe
      :loading="loading">
      <template slot-scope="{ row, index }" slot="action">
          <Button  size="small"  
            ghost
            v-for="(item,index) in operate"
            style="margin-right: 5px" 
            :type="item.type"
            :key="index"
            @click.native.prevent.stop="buttonMethods(item.func, index, row)"
            >
            {{item.name}}
          </Button>
      </template>
    </Table>
    <div class="page-wrap" v-if="!loading">
      <Page ref="page" :total="totalRow" show-total show-elevator 
        @on-change="nextPage" 
        :current="pageNo"></Page>
    </div>
    
	</div>
</template>
<script>
import axios from 'axios'
export default {
	components:{
		
	},
	props:{
    pageNo: {
      type: Number,
      default: 1
    },
    totalRow: {
      type: Number,
      default: 0
    },
    tableData: {
      // 表格数据
      type: Array,
      default: () => [],
    },
    loading: {
      type: Boolean,
      default: true
    },
    operate: {
      // 自定义按键及绑定方法
      type: Array,
      default: () => [],
    },
    showIndex: { //是否显示序号
      type: Boolean,
      default: true
    },
		columns: {    //table  展示字段数组
			type: Array
		}
  },
  data () {
		return {
      action: [{
        title: '操作',
        slot: 'action',
        //width: 150,
        align: 'center'
      }],
			pageSize: 10,
		}
	},
	computed:{
		columnList(){
			let columnArr = [];
			let sortCol = {
        title: '序号',
        type: 'index',
        width: 60,
        align: 'center'
      }
      if(this.showIndex) columnArr.push(sortCol)
      //if(this.columns.length > 0){
        this.columns = this.columns.map((item, index) => {
          item.tooltip = true
          return item;
        }) 
      //}
      return columnArr.concat(this.columns, this.action)
    },
    
	},
	
	created(){
		
	},
	methods: {
    nextPage(page){
      this.$emit('pageChange',page)
    },
    remove(index){

    },
    buttonMethods(func, index, row){
      console.log('row--', row)
      //console.log('option', this.$options)
      console.log('parent--',this.$parent.$parent);
      const { parent } = this.$options
      //parent[func](row)
      this.$parent.$parent[func](row);
      // const _this = this
      // const { methods } = this.$options
      // methods[func](_this, index)
    },
  },
  watch: {
    tableData(val){
      //console.log('---val', val);
    }
  }
}
</script>
<style scoped>
.page-wrap{
  text-align: center;
  margin: 5px;
}
</style>